<template>
    <div id="header">
        <div class="item">
            <router-link to="/" :class="isActive==1?'active':'low'">
                <span class="fa fa-home fa-lg"></span>
                <p>首页</p>
            </router-link>
        </div>
        <div class="item">
            <router-link to="/Kind" :class="isActive==2?'active':'low'">
                <span class="fa fa-reorder fa-lg"></span>
                <p>分类</p>
            </router-link>
        </div>
        <div class="item fs">
            <router-link to="/second/Publish" :class="isActive==3?'active':'low'">
                <span class="fa fa-camera fa-lg"></span>
                <p>发布</p>
            </router-link>
        </div>
        <div class="item">
            <router-link to="/second/Message" :class="isActive==4?'active':'low'">
                <span class="fa fa-commenting fa-lg"></span>
                <p>消息</p>
            </router-link>
        </div>
        <div class="item">
            <router-link to="/second/User" :class="isActive==5?'active':'low'">
                <span class="fa fa-user fa-lg"></span>
                <p>我的</p>
            </router-link>
        </div>
        <div class="upload">

        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default{
    mounted:function(){

    },
    computed:{
        ...mapState([
            "isActive"
        ])
    }
}
</script>

<style scoped>
    #header{
        height: 44px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        border-top: solid 1px #eee;
        background-color: white;
    }
    .item{
        width: 25%;
        display: inline-block;
        text-align: center;
    }
    .fs a{
        color: white !important;
    }
    .upload{
        width: 60px;
        height: 60px;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid red;
        border-radius: 50%;
        background-color: red;
        z-index: -100;
    }
    p{
        margin: 0;
        font-size: 12px;
    }
    a{
        text-decoration: none;
        color: black;
    }
    #header .low{
        color: black;
    }
    #header .active{
        color: red;
    }
</style>